import React, {
    Fragment,
    PureComponent
} from 'react';

import {
    View,
    TextInput,
    StyleSheet
} from 'react-native';

import {
    Press
} from './../../components';

import delete_icon from './img/delete.png';
import eye_open from './img/eye_open.png';
import eye_close from './img/eye_close.png';

type Types = 'number' | 'text' | 'password' | 'email';

interface State {
    curValue: string,
    showPwd: boolean
}

export interface Props {
    type: Types,
    value: string,
    autoFocus:boolean,
    onChange:Function,
    placeholder: string,
    disabled: boolean,
    onPress:Function,
    renderLeft: Function,
    renderRight:Function
}

class Input extends PureComponent<Props, State> {

    constructor(props:Props) {
        super(props);
        this.state = {
            curValue: props.value,
            showPwd: false
        }
    }

    static defaultProps = {
        value: ``,
        autoFocus:false,
        disabled: false,
        type: `number`,
        onPress: () => null,
        onChange: () => null,
        renderLeft: () => null,
        renderRight: () => null,
        placeholder:``
    }

    static getDerivedStateFromProps(
        nextProps: Props,
        prevState: State
    ) {
        const {
            value
        } = nextProps;

        const {
            curValue
        } = prevState;

        if (value !== curValue) {
            return {
                curValue: value
            }
        }

        return null;
    }

    get keyboardType() {
        const {
            type
        } = this.props;

        const maps = {
            text: `default`,
            number: `numeric`,
            email: `email-address`
        } as any;

        return maps[type] || 'default' as Types;
    }

    get isPassword() {
        const {
            type
        } = this.props;
        return type === `password`;
    }

    private onClear = () => {
        this.onChange(``);
    }

    private onChangeText = (text: string) => {
        this.onChange(text)
    }

    private onChange = (text: any) => {
        const {
            onChange
        } = this.props;
        this.setState({
            curValue: text
        }, () => {
            onChange(text)
        })
    }

    private onShowPwd = () => {
        const {
            showPwd
        } = this.state;
        this.setState({
            showPwd: !showPwd
        })
    }

    _renderRight = () => {
        const {
            showPwd,
            curValue
        } = this.state;

        const {
            disabled
        } = this.props;

        if (disabled) {
            return null;
        }

        return (
            <Fragment>
                {!!curValue && (
                    <Press
                        source={delete_icon}
                        onPress={this.onClear}
                        style={styles.deleteRow}
                    />
                )}
                {this.isPassword && (
                    <Press
                        style={styles.showRow}
                        onPress={this.onShowPwd}
                        source={showPwd ? eye_open:eye_close}
                    />
                )}
            </Fragment>
        )
    }

    render() {
        const {
            onPress,
            disabled,
            renderLeft,
            renderRight,
            placeholder,
            autoFocus
        } = this.props;

        const {
            curValue,
            showPwd
        } = this.state;

        const _rightElement = renderRight();

        return (
            <View style={styles.container}>
                <View style={styles.content}>
                    {renderLeft(curValue)}
                    <TextInput
                        value={curValue}
                        autoFocus={autoFocus}
                        editable={!disabled}
                        style={styles.inputStyle}
                        placeholder={placeholder}
                        placeholderTextColor="#bbbbbb"
                        onChangeText={this.onChangeText}
                        keyboardType={this.keyboardType}
                        underlineColorAndroid="transparent"
                        secureTextEntry={!showPwd && this.isPassword}
                    />
                    <View style={styles.right}>
                        {!!_rightElement ? _rightElement : (
                            this._renderRight()
                        )}
                    </View>
                    {disabled && (
                        <Press
                            onPress={onPress}
                            style={StyleSheet.absoluteFill}
                        />
                    )}
                </View>
            </View>
        )
    }
}

export default Input;

const styles = StyleSheet.create({
    container: {
        paddingTop: 18,
        alignItems:`center`,
        flexDirection:`row`
    },
    content: {
        flex:1,
        height: 52,
        borderWidth: .8,
        paddingLeft:12,
        paddingRight:8,
        flexDirection: `row`,
        borderColor: `#ccc`,
        backgroundColor:`#fff`
    },
    inputStyle: {
        flex: 1,
        fontSize: 16,
        color: `#333`
    },
    right: {
        height: `100%`,
        alignItems:`center`,
        flexDirection: `row`
    },
    deleteRow: {
        width: 28,
        height: `100%`,
        alignItems: `center`,
        justifyContent: `center`
    },
    showRow: {
        width: 28,
        height: `100%`,
        marginLeft: 4,
        alignItems: `center`,
        justifyContent: `center`
    }
}) as any;